<template>
  <dv-border-box-3 class="bian" :color="['#708CD2','#708CD2']">
  <div class="table-container">
    <table class="personal-info-table">
        <tr>
          <td colspan="2" rowspan="3">
            <img src="@/assets/photo.jpg" alt="" />
          </td>
          <td>姓名</td>
          <td>{{ student.stuName }}</td>
          <td>性别</td>
          <td>{{ student.sex }}</td>
        </tr>
        <tr>
          <td>年龄</td>
          <td>{{ student.age }}</td>
          <td>年级</td>
          <td>{{ student.grade }}</td>
        </tr>
        <tr>
          <td colspan="1">面貌</td>
          <td colspan="3">{{ student.identity }}</td>
             
        </tr>
        <tr>
          <td colspan="2">院系</td>
          <td colspan="4">{{ student.college }}</td>
          <!-- <td>学历</td>
          <td colspan="2">{{ student.study }}</td> -->
        </tr>
        <tr>
          <td colspan="2">专业</td>
          <td colspan="2">{{ student.major }}</td>
          <td>班级</td>
          <td colspan="2">{{ student.className }}</td>   
        </tr>
        <tr>
          <td colspan="2">学号</td>
          <td colspan="2">{{ student.number }}</td>
          <td>学历</td>
          <td colspan="2">{{ student.study }}</td>
        </tr>
        <!-- 添加其他个人信息行 -->
    </table>
  </div>
</dv-border-box-3>
</template>

<script>
import pubsub from "pubsub-js";
export default {
  name: "PersonalInfoormation",
  data() {
    return {
      student: {
        stuName: "",
        sex: "",
        age: 19,
        grade: "",
        identity: "",
        // home: "河南济源",  // 数据库没有
        // live: 5348,       // 数据库没有
        study: "本科",
        college: "",
        major: "",
        number: "",
        className: "",
        live:'9505'
      },
      stuId: "",
    };
  },
  methods: {
    getInfo() {
      this.$http({
        url: this.$http.adornUrl(`/chaoxing/stuinfo/info/${this.stuId}`),
        method: "get",
      }).then((response) => {
        // console.log("个人信息,", response.data.data);
        this.student.stuName = response.data.data.stuName;
        this.student.sex = response.data.data.gender == 1 ? "男" : "女";
        this.student.grade =
          response.data.data.year == 2020
            ? "大四"
            : response.data.data.year == 2021
            ? "大三"
            : response.data.data.year == 2022
            ? "大二"
            : response.data.data.year == 2023
            ? "大一"
            : "往届";
        this.student.age = 19;
        this.student.identity = response.data.data.identity;
        this.student.college = response.data.data.college;
        this.student.major = response.data.data.major;
        this.student.className = response.data.data.className;
        this.student.number = response.data.data.stuId;
      });
    },
  },
  mounted() {
    this.pubId = pubsub.subscribe("selectStuInfo", (msgName, data) => {
      console.log("详细信息订阅个人信息,".data);
      this.stuId = data;
      this.getInfo();
    });
  },
  beforeDestroy() {
    pubsub.unsubscribe(this.pubId)
  },
};
</script>

<style>
.table-container,.bian {
  color:#fff;
  width: 347px;
  height: 240px;
  overflow-x: auto;
  padding: 15px;
  margin: 0 auto;
  box-sizing: border-box;
}

.personal-info-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 auto;
  font-size: 18px;
}

td {
  width: 55px;
  padding: 5px;
  border: 1px solid #708CD2;
}
img {
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 100px) {
  .personal-info-table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
}
</style>
